<template>
  <div class="hello">

<p>情况二：监听ref定义的对象类型的复杂数据类型</p>
<h3>姓名：{{ person.name }}</h3>
<h3>年龄：{{ person.age }}</h3>
<h3>地址：{{ person.address.city }}</h3>
<h3>爱好：{{ person.hobbies }}</h3>
<button @click="modifyName">修改姓名</button>
<button @click="modifyAge">修改年龄</button>
<button @click="modifyPerson">修改整个人信息</button>




  </div>
</template>

<script setup>
import { ref, watch } from 'vue';
let person = ref(
  {
  name:'张三',
  age: 20,
  address: {
    city: '北京',
  },
  hobbies: ['篮球', '足球', '乒乓球'],

}
)
// 方法
function modifyName() {
  person.value.name += '~'
}
function modifyAge() {
  person.value.age += 1;
}
function modifyPerson(){
  person.value = {
    age: 99,
    name: '李四',
    address: {
      city: '上海',
    },
    hobbies: ['吃饭', '碎觉', '学习'],
  }
}
// 监听watch  情况一：监听ref自定义对象类型的数据类型监听的是person对象的地址值，监听整个对象，不监听里面的属性变化
// 如果想也让watch监听到person里面的每一个属性的变化的话---需添加深度监听 deep:treu 属性
watch(person,(newVal, oldVal) => {
  console.log('监听到数据变化：', newVal, oldVal)
})

// 情况二：监听ref定义的对象类型的复杂数据类型--深度监听 监听哪一个属性的变化
watch(person,(newVal, oldVal) => {
  console.log('监听到数据变化：', newVal, oldVal)
},{deep:true}) // 深度监听


// 情况三：一打开先执行监听一下，就添加 imediate:true属性
watch(person,(newVal, oldVal) => {
  console.log('监听到数据变化：', newVal, oldVal)
},{deep:true,immediate:true}) // 深度监听，一打开先执行监听一下
</script>

<style scoped>

</style>
